<template>
  <div class="index" id="questions-page" v-loading="loading">
    <div class="top-banner-box"></div>
    <ul class="list-box">
      <li class="list-item-box" v-for="(item,index) in list" :key="index">
        <div class="van-row">
          <div class="van-col van-col--24">
            <p class="question-title">
              {{item.itemDesc}}
            </p>
          </div>
        </div>
        <div class="bottom" @click="tog(index)">
          <div class="radio flex-jusa" :class="zindex==index?'on':''">
            <div class="dian"></div>
            <p>是</p>
          </div>
        </div>
      </li>
    </ul>
    <div class="btn-box" @click="comitBtn">提交</div>
  </div>
</template>
<script>
import { getPolicyNaire } from "@/api/service/service";
export default {
  name: "chooseProject",
  data: function () {
    return {
      zindex: 0,
      cateId:"",
      identity:"",
      cityId:"",              //地区id
      districtId:"",          //区域id
      num:0,                  //答题页数
      list:[],
      questionList:[],
      questionItemIds:'',     //选择id拼接字符串
      loading:false
    };
  },
  created(){
    this.cateId = this.getQueryString("cateId")
    this.cityId = this.getQueryString("cityId")
    this.districtId = this.getQueryString("districtId")
    this.identity = this.getQueryString("identity");
    this.getPolicyNaireApi()
  },
  mounted() {
    
    
  },
  watch: {},

  methods: {
    tog(e){
          this.zindex = e;
      },
    getPolicyNaireApi() {
      let data = {
              cityId:this.cityId,
              districtId:this.districtId,
              cateId:this.cateId
          };
      getPolicyNaire(data).then((res) => {
        this.loading = true;
        if (res.resp_code === 0) {
          this.loading = false;
            this.questionList = res.datas.questionList;
            let list = res.datas.questionList[0].questionItemList;
            for(let i=0; i<list.length; i++){
                if(i == 0){
                   list[i].on = true; 
                }else{
                  list[i].on = false;
                }
            }
            list.push(
                {
                    id:0,
                    isNo:0,
                    on:false,
                    itemDesc:'以上均不符合？'
                }
            )
            this.list = list;
        }
      });
    },
    comitBtn(){
          if(this.list[this.zindex].id !== 0){
              //符合
              if(this.num+1 < this.questionList.length){
                this.num++
                this.questionItemIds = this.questionItemIds+this.list[this.zindex].id+",";
                let list = this.questionList[this.num].questionItemList;
                for(let i=0; i<list.length; i++){
                    if(i == 0){
                    list[i].on = true; 
                    }else{
                        list[i].on = false;
                    }
                }
                list.push(
                    {
                        id:0,
                        isNo:0,
                        on:false,
                        itemDesc:'以上均不符合？'
                    }
                )
                this.list = list;
              }else{
                  this.questionItemIds+=this.list[this.zindex].id;
                  this.$router.push({path:'/matchresults?questionItemIds='+this.questionItemIds+'&cateId='+this.cateId+'&identity='+this.identity})
                  
              }
          }else{
            //   不符合
            this.$router.push({path:'/matchresults?questionItemIds=&cateId='+this.cateId+'&identity='+this.identity})
          }
          //if()
      },
    getQueryString (name) { 
        let reg = `(^|&)${name}=([^&]*)(&|$)`
        let r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); return null; 
      }
  },
};
</script>
<style scoped>
.index {
  background: #eee;
}
#questions-page .top-banner-box {
  height: 200px;
  background: transparent
    url(../../assets/policy/supply-policy.png) no-repeat 50%/cover;
}
#questions-page .list-box {
  margin-top: -70px;
}
#questions-page .list-item-box {
  background: #fff;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.van-row:after {
  display: table;
  clear: both;
  content: "";
}
.van-col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
}
.van-col--24 {
  width: 100%;
}
.rp {
  padding-right: 16px;
}
.van-row:after {
  display: table;
  clear: both;
  content: "";
}
.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
.van-col--24 {
  width: 100%;
}
.van-col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
}
#questions-page .question-title {
  padding: 10px;
  line-height: 1.5;
}
.bottom {
  border-top: 1px solid #ddd;
  line-height: 45px;
  box-sizing: border-box;
  font-size: 14px;
}
.list .li .top {
  border-bottom: 1px solid #E8E8E8;
  padding-left: 24px;
  color: #343434;
}
.bottom .radio .dian {
  width: 13px;
  height: 13px;
  border: 1px solid #DADADA;
  border-radius: 50%;
}
.bottom .radio p {
  display: inline-block;
  margin: 0;
  height: auto;
  padding-left: 10px;
}
.bottom .radio.on .dian {
  width: 13px;
  height: 13px;
  border: 4px solid #3EACC4;
  border-radius: 50%;
}
#questions-page .btn-box {
    margin: 10px;
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    background: linear-gradient(90deg,#0bbf76,#3ab8c4);
}
</style>
